<!doctype html>
<html>
<head>
<title>选择出发城市</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/jquery-1.9.0.min.js"></script>
  <script>
      //显示客服
      function l(){
          $(".city").toggle()
      }
      function l1(){
          $(".city1").toggle()
      }
      function l2(){
          $(".city2").toggle()
      }
      function l3(){
          $(".city3").toggle()
      }
  </script>
</head>
<body>
<div class="containter">
  <header data-am-widget="header" class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
      <a href="javascript:;"onClick="javascript :history.back(-1);">
        <img src="assets/images/left.png">
      </a>
    </div>
    <h1 class="am-header-title">
      选择出发城市
    </h1>
    <div class="am-header-right am-header-nav">
        <a href="">
          确定
        </a>
    </div>
  </header>
  <div style="height: 4rem; width: 100%;"></div>
  <div class="Select_City">
    <h2 id="l" onclick="l()">当前定位城市</h2> 
    <p class="city"><img src="assets/images/location.png">北京市</p>
    <h2 id="l1" onclick="l1()">热门城市</h2> 
    <table class="city1">
      <tr>
        <td>重庆市</td><td>武汉市</td><td>香港岛</td><td>深圳市</td><td>香港特别行政区</td>
      </tr>
      <tr>
        <td>重庆市</td><td>武汉市</td><td>香港岛</td><td>深圳市</td><td>香港特别行政区</td>
      </tr>
      <tr>
        <td class="active">重庆市</td><td>武汉市</td><td>香港岛</td><td>深圳市</td><td>香港特别行政区</td>
      </tr>
    </table>
    <h2 id="l2" onclick="l2()">快速定位</h2>
    <table class="city2">
      <tr>
        <td><a href="#l3">A</a></td>
        <td><a href="">B</a></td>
        <td><a href="">C</a></td>
        <td><a href="">D</a></td>
        <td><a href="">E</a></td>
      </tr>
      <tr>
        <td><a href="">F</a></td>
        <td><a href="">G</a></td>
        <td><a href="">H</a></td>
        <td><a href="">I</a></td>
        <td><a href="">J</a></td>
      </tr>
      <tr>
        <td><a href="">K</a></td>
        <td><a href="">L</a></td>
        <td><a href="">M</a></td>
        <td><a href="">N</a></td>
        <td><a href="">O</a></td>
      </tr>
      <tr>
        <td><a href="">P</a></td>
        <td><a href="">Q</a></td>
        <td><a href="">R</a></td>
        <td><a href="">S</a></td>
        <td><a href="">T</a></td>
      </tr>
      <tr>
        <td><a href="">W</a></td>
        <td><a href="">X</a></td>
        <td><a href="">Y</a></td>
        <td><a href="">Z</a></td>
      </tr>
    </table>
    <h2 id="l3" onclick="l3()">A</h2>
    <table class="city3">
    <tr>
      <td>重庆市</td><td>武汉市</td><td>香港岛</td><td>深圳市</td><td>香港特别行政区</td>
    </tr>
    <tr>
      <td>重庆市</td><td>武汉市</td><td>香港岛</td><td>深圳市</td><td>香港特别行政区</td>
    </tr>
    <tr>
      <td>重庆市</td><td>武汉市</td><td>香港岛</td><td>深圳市</td><td>香港特别行政区</td>
    </tr>
  </table>

  </div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script>
    $("table tr td").click(function(){
        $("tr td").removeClass("active");
        $(this).addClass("active");   
    })
</script>
</body>
</html>